
#root{
  width: 800px;
  margin: 0 auto;
  // header
  .header{
    height: 100px;
    background: #cef;
    //鼠标移入的样式切换
    &:hover{
      background: #c90;
    }
    //媒体查询
    @media screen and (min-width: 700px) and (max-width: 800px){
      background: rgb(37, 75, 94);
    }

    @media screen and (min-width: 800px) and (max-width: 900px){
      background: rgb(83, 167, 35);
    }
  }

  // content
  > .content{
    height: 500px;
    padding-top: 50px;
    //left
    > .left{
      width: 150px;
      height: 200px;
      background: #c89;
      float: left;
    }
    // 右侧元素
    > .right{
      width: 600px;
      height: 400px;
      background: #89c;
      float: right;
    }

    //清除浮动
    &::after{
      content: '';
      display: block;
      clear: both;
    }
  }

}

